/**
* Options:
* head : 头像地址
* name : 该用户名字
* describe : 该用户描述
* befocus : 被专注人数
* focus : 关注人数
* personalink : 查看个人的链接（可于头像及名字上使用）
* befocuslink : 查看关注他的人的页面地址
* focuslink : 查看被他关注的人的页面地址
* focusattribute : 也许点击关注按钮需要传参，这里就留给传参用
*/
var card = {
	options : {
		head : '',
		name : '测试名字',
		describe : '测试文字哇哈哈哈测试文字哟~',
		befocus : 123,
		focus : 456,
		personalink : 'javscript:void(0)',
		befocuslink : 'javscript:void(0)',
		focuslink : 'javscript:void(0)',
		focusattribute : ''
	},
	setOptions : function(options) {
		for(var i in options) {
			this.options[i] = options[i];
		}
	},
	ucard : function() {
		var card = $(
		'<div class="card" id="ucard">
			<div class="perins">
				<img src="'+this.options.head+'" alt="'+this.options.name+'" />
				<p class="c-name"><a href="'+this.options.personalink+'">'+this.options.name+'</a></p>
				<p class="c-instr">'+this.options.describe+'</p>
				<p class="c-att">
					<span>被关注:<b>'+this.options.befocus+'</b></span><span>关注:<b>'+this.options.focus+'</b></span>
				</p>
			</div>
			<div class="perfun">
				<a href="" class="attention">guanzhu</a>
			</div>
		</div>'
		);
		return card;
	},
	load : function(target) {
		var ucard ;
		target.mouseover(function(){
			// ajax 获取数据，再调用setOptions设置到tips对象中去
			// *^((&$#))^%#@$545
			ucard = this.ucard();
			ucard.appendTo('body');
			clearTimeout(hideCard);
			var offset = target.offset();
			var left = offset.left;
			var width = ucard.width();
			left += target.width() + 2;
			if(side == 'left') {
				left -= (width + 4);
			}
			ucard.css({
				top : offset.top+'px',
				left : left+'px'
			}).show();
		}).mouseleave(function(e){
			hideCard = setTimeout(function(){
				ucard.remove();
			},700);
		});
	},
	reload : function() {
		$('#ucard').detach();
		this.ucard.appendTo('body');
	}
};
function showCard(target,side) {
	var hideCard = null;
	$(target).mouseover(function(){
		clearTimeout(hideCard);
		var user = $(this);
		var offset = user.offset();
		var left = offset.left;
		var width = $('#vcard').width();
		left += 62;
		if(side == 'left') {
			left -= 304;
		}
		$('#vcard').css({
			top : offset.top+'px',
			left : left+'px'
		}).show();
	}).mouseleave(function(e){
		hideCard = setTimeout(function(){
			$('#vcard').hide();
		},700);
	});
	$('#vcard').mouseover(function(){
		clearTimeout(hideCard);
	}).mouseleave(function(){
		this.style.display = 'none';
	});
}
$(document).ready(function(){
	showCard('.blog>a','right');
});